import React, { Component } from 'react'
import { message, Modal } from 'antd';
import { Form, Input, Button, Select } from 'antd';
import { getCategoriesAPI, addCategoriesAPI } from './../apis/categoryAPI'
const { Option } = Select;
const layout = {
    labelCol: {
        span: 8,
    },
    wrapperCol: {
        span: 16,
    },
};
const tailLayout = {
    wrapperCol: {
        offset: 8,
        span: 16,
    },
};
export default class addCateModal extends Component {

    state = {
        typeClass: '一级分类',
        firstTypes: [],
        parentId: 0

    }
    handleOk = () => {

    };

    handleCancel = () => {
        this.props.showAddModal(false)
    };

    onFinish = async (values) => {
        const { parentId } = this.state
        console.log(values);
        const res = await addCategoriesAPI({ ...values, parentId })
        console.log(res);
        if (res.data.code) {
            message.success('添加成功')
            this.props.getCategories()
        }

    };

    classChange = (value) => {
        // console.log(value, opt);
        setTimeout(() => {
            this.setState({ typeClass: value })
            if (value == '二级分类') this.getFirstTypes()
        }, 0);

    }
    firstChange = (value) => {
        const { typeClass } = this.state
        const parentId = typeClass == '一级分类' ? 0 : value
        this.setState({ parentId })
    }
    getFirstTypes = async () => {
        const res = await getCategoriesAPI({ parentId: this.state.parentId })
        console.log(res);
        this.setState({
            firstTypes: res.data.data.data
        })
    }
    render() {
        return (
            <>
                <Modal footer={null} title="添加种类" visible={this.props.isModalVisible} onOk={this.handleOk} onCancel={this.handleCancel}>
                    <Form {...layout} name="control-hooks" onFinish={this.onFinish}>
                        <Form.Item
                            name="name"
                            label="分类名称"
                            rules={[
                                {
                                    required: true,
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            name="type"
                            label="类型级别"
                            rules={[
                                {
                                    required: true,
                                },
                            ]}
                        >
                            <Select
                                placeholder="选择分类级别"

                                allowClear
                                onChange={this.classChange}
                            >
                                <Option value="一级分类">一级分类</Option>
                                <Option value="二级分类">二级分类</Option>
                            </Select>
                        </Form.Item>
                        {this.state.typeClass == '二级分类' ? <Form.Item
                            name="parentId"
                            label="一级分类"
                            rules={[
                                {
                                    required: true,
                                },
                            ]}
                        >
                            <Select
                                placeholder="选择一级分类"

                                allowClear
                                onChange={this.firstChange}
                            >
                                {this.state.firstTypes.map(f => <Option value={f._id} key={f._id}>{f.name}</Option>)}

                            </Select>
                        </Form.Item> : null}
                        <Form.Item {...tailLayout}>
                            <Button type="primary" htmlType="submit">
                                添加
                            </Button>


                        </Form.Item>
                    </Form>
                </Modal>
            </>
        )
    }
}
